<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row class="live_wrapper clearfix">
                      <Select v-model="filter.repair_id" style="float:right; width: 200px;margin-right: 35px;" @on-change="search" placeholder="选择抢修队">
                          <Option value="0">全部</Option>
                          <Option :value="item.id" v-for="(item, index) in repair_list">{{item.name}}</Option>
                      </Select>
                    </Row>
                    <Row class="margin-top-10 table_pattern table_pattern2">
                        <Table :loading="loading" :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="show_detail" title="详情" width="500px" :mask-closable="false" class="public_modal_header edit_modal show_audit">
          <div style="min-height:320px; padding: 20px 0;">
              <div style="float: left;padding-left: 50px;">
                  <p style="color: #333;font-size: 14px;margin-bottom: 10px;line-height: 28px;">抢修队名称：{{cur_obj.repair_name}}</p>
                  <p style="color: #333;font-size: 14px;margin-bottom: 10px;line-height: 28px;">评价者姓名：{{cur_obj.user_name}}</p>
                  <p style="color: #333;font-size: 14px;margin-bottom: 10px;line-height: 28px;">完成时间：<Rate disabled v-model="cur_obj.star_finsh_time"/></p>
                  <p style="color: #333;font-size: 14px;margin-bottom: 10px;line-height: 28px;">完成质量：<Rate disabled v-model="cur_obj.star_finsh_quality"/></p>
                  <p style="color: #333;font-size: 14px;margin-bottom: 10px;line-height: 28px;">服务态度：<Rate disabled v-model="cur_obj.star_service"/></p>
                  <p style="color: #333;font-size: 14px;margin-bottom: 10px;line-height: 28px;">评价内容：{{cur_obj.content}}</p>
                  <p style="color: #333;font-size: 14px;margin-bottom: 10px;line-height: 28px;">评价时间：{{cur_obj.created_time}}</p>
              </div>
          </div>
        </Modal>
    </div>
</template>
<script>
    import config from '@/config'
    import { repairListForSelect, repairEvaluateList, changeRepairEvaluateStatus} from '@/api/main'
    export default {
        data() {
            return {
                pagenation: {},
                columns: [
                    {
                        key: 'repair_name',
                        title: '抢修队',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.repair_name)
                        },
                    },
                    {
                        key: 'star_finsh_time',
                        title: '完成时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.star_finsh_time+'星评价')
                        },
                    },
                    {
                        key: 'star_finsh_quality',
                        title: '完成质量',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.star_finsh_quality+'星评价')
                        },
                    },
                    {
                        key: 'star_service',
                        title: '服务态度',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.star_service+'星评价')
                        },
                    },
                    {
                        key: 'content',
                        title: '评价内容',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.content)
                        },
                    },
                    /*{
                        key: 'task_name',
                        title: '任务名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.task_name)
                        },
                    },*/
                    {
                        key: 'user_name',
                        title: '评价者姓名',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.user_name)
                        },
                    },
                    {
                        key: 'created_time',
                        title: '评价时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.created_time)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF'
                                      },
                                      on: {
                                          click: () => {
                                            this.evaluateDetail(params.row)
                                          },
                                      },
                                  },
                                  '详情',
                                ),
                                h(
                                      'Poptip',
                                      {
                                          props: {
                                              confirm: true,
                                              title: '您确定要删除该评价吗?',
                                              transfer: true,
                                          },
                                          on: {
                                              'on-ok': () => {
                                                  let obj = {}
                                                  obj.id = params.row.id
                                                  obj.status = -1
                                                  changeRepairEvaluateStatus(obj).then(res => {
                                                      if (res.code === 0) {
                                                        this.$Message.success('操作成功')
                                                        this.init()
                                                      } else {
                                                          this.$Message.error(res.text)
                                                      }
                                                  })
                                              },
                                          },
                                      },
                                      [
                                          h(
                                              'Button',
                                              {
                                                  style: {
                                                      marginBottom: '5px',
                                                      border:0,
                                                      background:'transparent',
                                                      fontSize:'14px',
                                                      color:'#377EEF'
                                                  },
                                                  props: {
                                                      placement: 'top',
                                                      size: 'small',
                                                  },
                                              },
                                              '删除',
                                          ),
                                      ],
                                  ),
                            ])
                        },
                    },
                ],
                list: [],
                repair_list: [],
                loading: true,
                filter: {
                    page: 0,
                    repair_id: 0
                },
                cur_obj: {},
                show_detail: false
            }
        },
        methods: {
            change: function(page) {
                this.loading = true
                this.filter.page = page-1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            evaluateDetail(obj) {
              this.cur_obj = obj
              this.show_detail = true
            },
            init () {
                repairEvaluateList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.loading = false
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    }
                })
            }
        },
        mounted() {
            this.init();
            repairListForSelect(this.filter).then(res => {
              this.repair_list = res.data
            })
        }
    }
</script>
<style lang="less" scoped>
  .show_audit{
      /deep/ .ivu-form{
          overflow-y: scroll;
          height: 600px;
          padding-bottom: 70px;
      }
      .audit_btm{
          justify-content: center;
          align-items: center;
          margin-top: 50px;
          background: rgb(250, 251, 252);
          padding: 15px;
          text-align: center;
          position: absolute;
          width: 100%;
          left: 0;
          bottom: 0;
      }
  }
</style>
